<template>
    <view class="disabled-service-page">
        <!-- 顶部导航栏 -->
        <NavBar :title="'残疾人服务一件事'" />
        <scroll-view scroll-y="true" class="scroll-Y page-content">
            <!-- 位置信息 -->
            <view class="location-bar">
                <view class="location-icon">📍</view>
                <text class="location-text">所属区划: 拉萨市</text>
            </view>

            <!-- 在线填表部分 -->
            <view class="section-header">
                <view class="section-number">1</view>
                <text class="section-title">在线填表</text>
            </view>
            <view class="section">
                <!-- 残疾人信息分组 -->
                <view class="group-header">
                    <view class="group-icon">👤</view>
                    <text class="group-title">残疾人信息</text>
                </view>

                <!-- 填表项目列表 -->
                <view class="form-items">
                    <view
                        class="form-item"
                        v-for="(item, index) in formItems"
                        :key="index"
                        @click="handleUploadClick(item.code)"
                    >
                        <view class="item-content">
                            <text class="item-title">{{ item.title }}</text>
                            <text class="item-subtitle">{{ item.subtitle }}</text>
                        </view>
                        <text class="arrow">›</text>
                    </view>
                </view>
            </view>

            <view class="section section-top">
                <view class="form-item" @click="handleUploadClick('guardian')">
                    <view class="item-content">
                        <text class="item-title">监护人信息</text>
                        <text class="item-subtitle">点击右侧完成信息填写</text>
                    </view>
                    <text class="arrow">›</text>
                </view>
            </view>
            <view class="section section-top">
                <view class="form-item" @click="handleUploadClick('subsidies')">
                    <view class="item-content">
                        <text class="item-title">残疾人“两项补贴”</text>
                        <text class="item-subtitle">点击右侧完成信息填写</text>
                    </view>
                    <text class="arrow">›</text>
                </view>
            </view>
            <view class="section section-top">
                <view class="form-item" @click="handleUploadClick('assistance')">
                    <view class="item-content">
                        <text class="item-title">残疾人就业帮扶</text>
                        <text class="item-subtitle">点击右侧完成信息填写</text>
                    </view>
                    <text class="arrow">›</text>
                </view>
            </view>
            <!-- 资料上传部分 -->
            <view class="section-header">
                <view class="section-number">2</view>
                <text class="section-title">资料上传</text>
            </view>
            <view class="section">
                <!-- 联办表 -->
                <view class="form-item" @click="handleUploadClick('jointForm')">
                    <view class="item-content">
                        <text class="item-title">"残疾人服务一件事"联办表</text>
                        <text class="item-subtitle">点击完成资料上传</text>
                    </view>
                    <text class="arrow">›</text>
                </view>
            </view>
            <view class="section section-top">
                <!-- 身份证分组 -->
                <view class="group-header">
                    <view class="group-icon">👤</view>
                    <text class="group-title">中华人民共和国居民身份证</text>
                </view>

                <!-- 身份证上传项目 -->
                <view>
                    <view
                        class="form-item"
                        v-for="(item, index) in idCardItems"
                        :key="index"
                        @click="handleUploadClick(item.code)"
                    >
                        <view class="item-content">
                            <text class="item-title">{{ item.title }}</text>
                            <text class="item-subtitle">{{ item.subtitle }}</text>
                        </view>
                        <text class="arrow">›</text>
                    </view>
                </view>
            </view>
            <view class="section-top other-upload-container">
                <view class="other-upload-items">
                    <view
                        class="other-upload-item"
                        v-for="(item, index) in otherUploadItems"
                        :key="index"
                        @click="handleUploadClick(item.code)"
                    >
                        <view class="item-subcontent">
                            <view class="item-sub">
                                <text class="item-title">{{ item.title }}</text>
                                <text class="item-subtitle">{{ item.subtitle }}</text>
                            </view>
                            <text class="arrow item-arrow">›</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 提交按钮 -->
            <view class="submit-section">
                <button class="submit-btn" @click="handleSubmit">提交</button>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    name: 'DisabledServicePage',
    data() {
        return {
            formItems: [
                {
                    code: 'baseInfo',
                    title: '基本信息',
                    subtitle: '点击右侧完成信息填写'
                },
                {
                    code: 'region',
                    title: '户籍地址',
                    subtitle: '点击右侧完成信息填写'
                },
                {
                    code: 'reside',
                    title: '居住地址',
                    subtitle: '点击右侧完成信息填写'
                }
            ],
            idCardItems: [
                {
                    code: 'disabledIdCard',
                    title: '残疾人身份证',
                    subtitle: '点击完成资料上传'
                },
                {
                    code: 'guardianIdCard',
                    title: '监护人身份证',
                    subtitle: '点击完成资料上传'
                }
            ],
            otherUploadItems: [
                {
                    code: 'assessment',
                    title: '中华人民共和国残疾评定表',
                    subtitle: '点击完成资料上传'
                },
                {
                    code: 'liveCard',
                    title: '区内异地办理需提供居住有效"居住证"',
                    subtitle: '点击完成资料上传'
                },
                {
                    code: 'disabilityCert',
                    title: '原中华人民共和国残疾人证',
                    subtitle: '点击完成资料上传'
                },
                {
                    code: 'result',
                    title: '结果送达',
                    subtitle: '点击完成资料上传'
                }
            ]
        };
    },
    methods: {
        handleBack() {
            uni.navigateBack();
        },
        handleUploadClick(item) {
            console.log('点击上传项目:', item);
            uni.navigateTo({
                url: `/pages/fromTable/disabled/${item}`
            });
        },
        handleSubmit() {
            console.log('提交申请');
            // 这里可以添加提交逻辑
        }
    }
};
</script>

<style scoped>
.disabled-service-page {
    background: #ecf1f5;
    min-height: 100vh;
}

.location-bar {
    background: #ffe3c8;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ff7b00;
    font-size: 14px;
}

.location-icon {
    font-size: 16px;
}

.section {
    margin: 0 32rpx;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.section-top {
    margin-top: 16px;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24rpx 40rpx;
}

.section-number {
    width: 40rpx;
    height: 40rpx;
    background: #ff7b00;
    color: #ffffff;
    border-radius: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: #2c5e9f;
}

.group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 16px 8px 16px;
}

.group-icon {
    font-size: 32rpx;
    color: #2c5e9f;
}

.group-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #2c5e9f;
}

.form-items {
    padding: 0;
}

.form-item {
    display: flex;
    align-items: center;
    padding: 16px 12px;
    border-bottom: 1px solid #f0f0f0;
    background: #f1f8ff;
    cursor: pointer;
    margin: 8px 12px;
}

.form-item:last-child {
    border-bottom: none;
}

.form-item:hover {
    background: #f8f9fa;
}

.other-upload-container {
    margin: 16px 32rpx;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.other-upload-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.other-upload-item {
    padding: 12px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer;
}

.item-content {
    flex: 1;
}
.item-sub {
    padding: 8px 12px;
    flex: 1;
}
.item-subcontent {
    display: flex;
    align-items: center;
    background: #f1f8ff;
}

.item-title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 4px;
}

.item-subtitle {
    display: block;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
}

.arrow {
    font-size: 20px;
    color: #999;
    font-weight: bold;
}
.item-arrow {
    margin-right: 4%;
}

.submit-section {
    padding: 20px;
    margin-top: 20px;
    background: #ffffff;
}

.submit-btn {
    width: 100%;
    height: 48px;
    background: #2c5e9f;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.submit-btn:hover {
    background: #1e4a8a;
}
</style>
